<template>
	<uv-swiper :list="swiperList" height="596rpx" radius="0" @change="e => current = e.current"
		indicatorStyle="right: 20rpx; bottom: 50rpx">
		<template v-slot:indicator>
			<view class="indicator-num">
				<text class="indicator-num__text">{{ current + 1 }}/{{ swiperList.length }}</text>
			</view>
		</template>
	</uv-swiper>
</template>

<script setup>
	import {
		ref,
		defineProps
	} from 'vue'
	defineProps({
		swiperList: {
			type: Array,
			default: () => []
		}
	})
	const current = ref(0)
</script>

<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
</style>